@charset 'utf-8';
$font-size:40px;
@function l($px) {
    @return ($px/$font-size)*1rem;
}
html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    min-height: 100%;
    background: url(../images/diwen.png);
    background-size:100% 100%;
    background-repeat:no-repeat;    
    position: relative;
    .musicbutton {
        width: l(50px);
        height: l(50px);
        position: absolute;
        z-index: 9999;
        top: l(30px);
        right: l(30px);
        background: #E7C598;
        line-height: l(50px);
        border-radius: 50%;
        text-align: center;
        .iconfont {
            display: block;
            font-size: l(35px);
            color: #BF0C21;
        }
    }
    .top_father{
        padding-top: l(37px);
    }
    .top {
        width: l(89px);
        height: l(37px);
        background: #e7c598;
        border-radius: l(10px);
        text-align: center;
        line-height: l(37px);
        color: #BF0C21;
        cursor: pointer;
        font-size: 0;
        margin-left: l(46px);
        span {
            font-size: l(23px);
        }
    }
    .map {
        width: l(535px);
        height: l(408px);
        margin-top: l(25px);
        position: relative;
        margin-left: l(51px);
        display: none;
        img {
            width: 100%;
            height: 100%;
        }
        .icon1,
        .icon2 {
            background: url(../images/icon.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            width: l(67px);
            height: l(89px);
            font-size: l(14px);
            color: #BF0C21;
            padding: l(16px) 0 l(12px) l(12px);
            position: absolute;
            em {
                font-size: l(15px);
            }
        }
        .icon1 {
            top: l(-14px);
            left: l(370px);
        }
        .icon2 {
            top: l(266px);
            left: l(117px);
        }
    }
    .map1 {
        display: block;
        width: l(535px);
        height: l(408px);
        margin-top: l(25px);
        position: relative;
        margin-left: l(51px);
        img {
            width: 100%;
            height: 100%;
        }
        .icon1,
        .icon2,
        .icon3 {
            width: l(84px);
            height: l(89px);
            background: url(../images/icon.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            position: absolute;
            font-size: l(14px);
            color: #BF0C21;
            padding: l(16px) 0 l(12px) l(12px);
            text-align: center;
            em {
                font-size: l(18px);
            }
        }
        .icon1 {
            left: l(270px);
            top: l(-43px);
        }
        .icon2 {
            left: l(42px);
            top: l(173px);
        }
        .icon3 {
            left: l(136px);
            top: l(170px);
        }
    }
    .content {
        text-align: right;
        color: #E7C598;
        margin-top: l(-76px);
        box-sizing: border-box;
        padding-right: l(28px);
        position: relative;
        .one {
            font-size: l(29px);
            em {
                font-size: l(40px);
            }
        }
        .two {
            font-size: l(40px);
            margin-top: l(13px);
        }
        .three {
            font-size: l(28px);
            margin-top: l(11px);
        }
    }
    .bottom {
        margin-top: l(-40px);
        box-sizing: border-box;
        padding-left: l(55px);
        padding-right: l(55px);
    }
    .text {
        .big {
            font-size: l(26px);
            color: #E7C598;
        }
        .small {
            font-size: l(17px);
            color: #E7C598;
        }
        p {
            margin-top: l(16px);
            letter-spacing: l(1px);
        }
    }
    .img {
        display: block;
        position: absolute;
        width: l(320px);
        height: l(45px);
        bottom: l(65px);
        left: 50%;
        transform: translateX(-50%);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .return {
        width: l(41px);
        height: l(41px);
        border-radius: 50%;
        background: #e7c598;
        text-align: center;
        line-height: l(41px);
        position: absolute;
        right: l(56px);
        bottom: l(25px);
        font-size: 0;
        .iconfont {
            font-size: l(28px);
            color: #bf0c21;
        }
    }
}
@media only screen and (min-width:322px) and (max-width:414px){
    .web .bottom{
        margin-top: l(50px);
    }
}
